<%#
  Simple progress bar with recent progress.

  Requires:
    @total_xp
    @new_xp
%>

<%#
  Due to how Concise CSS progress bars work, we need to only apply the stacked class if
  there are two parts in the bar.
%>

<%
  {old_width, new_width} = get_xp_bar_widths(@total_xp, @new_xp)

  stacked = if new_width > 0 and old_width > 0, do: true, else: false
%>

<div class="progress-bar <%= if stacked do %>stacked<% end %>">
  <%= if old_width > 0 do %>
    <span
     class="progress progress-old"
     role="progressbar"
     style="width: <%= old_width %>%"
     aria-valuetext="Level progress <%= old_width %> %."
    ></span>
  <% end %>

  <%= if new_width > 0 do %>
    <span
     class="progress progress-recent"
     role="progressbar"
     style="width: <%= new_width %>%"
     aria-valuetext="Recent level progress <%= new_width %> %."
    ></span>
  <% end %>

  <span class="total-progress" aria-hidden="true"><%= old_width + new_width %>&nbsp;%</span>
</div>
